<!doctype HTML>
<html>

<head>
    <title> cookie-viewer</title>
    <meta charset="utf-8" />
    <script src="js/jquery-3.7.1.min.js"></script>
    
    <script src="json-viewer/jquery.json-viewer.js"></script>
    <link href="json-viewer/jquery.json-viewer.css" type="text/css" rel="stylesheet">

    <style type="text/css">
        body {
            margin: 0 100px;
            font-family:  consolas,monospace;
            background-color: #aaaaaa81;
        }

        p.options label {
            margin-right: 10px;
        }

        p.options input[type=checkbox] {
            vertical-align: middle;
        }

        textarea#json-input {
            width: 100%;
            height: 200px;
        }

        pre#json-renderer {
            border: 1px solid #aaa;
        }
    </style>


</head>

<body>
    <h1>cookie-viewer</h1>
    <textarea id="json-input" autocomplete="off" style="font-family: 'Courier New', Courier, monospace;">
</textarea>
    <p class="options">
        Options:
        <label title="Generate node as collapsed">
            <input type="checkbox" id="collapsed">Collapse nodes
        </label>
        <label title="Allow root element to be collasped">
            <input type="checkbox" id="root-collapsable" checked>Root collapsable
        </label>
        <label title="Surround keys with quotes">
            <input type="checkbox" id="with-quotes">Keys with quotes
        </label>
        <label title="Generate anchor tags for URL values">
            <input type="checkbox" id="with-links" checked>
            With Links
        </label>
    </p>
    <button id="btn-json-viewer" title="run jsonViewer()">格式化输出 to HTML</button>
    <pre id="json-renderer"  style="font-family: 'Courier New', Courier, monospace; background-color: aliceblue;"></pre>

   <script src="json-viewer/do.js"></script>
</body>

</html>